<template>
  <div class="home">
      <WarpperViewList :homelist="datalist" :routename="this.$route.name"/>
       <transition name="scrollX">
      <router-view />
    </transition>
  </div>
</template>

<script>
// @ is an alias to /src

import { debounce } from "lodash-es";
import WarpperViewList from '../../components/WarpperViewList.vue';
export default {
  components: { WarpperViewList },
  name: "HomeView",
  data(){
    return{
      datalist:[]
    }
  },
  created() {
    this.getData = debounce(this.getData);
  },
  mounted() {
    this.getData();
  },

  methods: {
    getData() {
      this.$axios
      .get('http://new.puncheers.com/api/v2/home/list?page=1&limit=4&type=60')
      .then(({data})=>{
        this.datalist=data.data
        // console.log( this.datalist);
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollX-enter,
.scrollX-leave-to {
  left: 0;
  top: 0;
  right: 0;
  position: absolute;
  transform: translateY(100%);
   opacity: 0;
}
.scrollX-enter-active {
  transition: all 0.7s ease;
   
}
.scrollX-leave{
  transform: translateY(-100%);
   opacity: 1;
}
.scrollX-enter-to {
 transform: translateY(0);
  opacity: 1;
}
.scrollX-leave-active {
  transition: all 0.7s ease;
  
  z-index: 100;
}
</style>
